Chargement Robuste de Ressources dans React : Maîtriser les Error Boundaries avec les Hooks

Dans les applications web modernes, le chargement asynchrone de ressources est une pratique courante. Qu'il s'agisse de récupérer des données d'une API, de charger des images ou d'importer des modules, la gestion des erreurs potentielles lors du chargement est cruciale pour une expérience utilisateur fluide. Les Error Boundaries de React fournissent un mécanisme pour intercepter les erreurs JavaScript n'importe où dans l'arborescence de leurs composants enfants, consigner ces erreurs et afficher une interface utilisateur de repli au lieu de faire planter toute l'application. Cet article explore comment utiliser efficacement les Error Boundaries en conjonction avec les Hooks React pour gérer les erreurs de chargement de ressources.

Comprendre les Error Boundaries

Avant React 16, les erreurs JavaScript non gérées pendant le rendu d'un composant corrompaient l'état interne de React et provoquaient des erreurs cryptiques lors des rendus suivants. Les Error Boundaries résolvent ce problème en agissant comme des blocs "catch-all" pour les erreurs qui se produisent dans leurs composants enfants. Ce sont des composants React qui implémentent l'une ou les deux des méthodes de cycle de vie suivantes :

• static getDerivedStateFromError(error): Cette méthode statique est invoquée après qu'une erreur a été levée par un composant descendant. Elle reçoit l'erreur qui a été levée comme argument et renvoie une valeur pour mettre à jour l'état du composant.
• componentDidCatch(error, info): Cette méthode de cycle de vie est invoquée après qu'une erreur a été levée par un composant descendant. Elle reçoit l'erreur qui a été levée comme argument, ainsi qu'un objet contenant des informations sur le composant qui a levé l'erreur. Vous pouvez l'utiliser pour consigner les informations sur l'erreur.

Il est important de noter que les Error Boundaries n'interceptent les erreurs que dans la phase de rendu, dans les méthodes de cycle de vie et dans les constructeurs de toute l'arborescence en dessous d'eux. Ils ne n'interceptent pas les erreurs pour :

• Les gestionnaires d'événements (apprenez-en plus dans la section ci-dessous)
• Le code asynchrone (ex: callbacks de setTimeout ou requestAnimationFrame)
• Le rendu côté serveur
• Les erreurs levées dans l'Error Boundary lui-même (plutôt que dans ses enfants)

Error Boundaries et Hooks React : une Combinaison Puissante

Alors que les composants de classe étaient traditionnellement utilisés pour implémenter les Error Boundaries, les Hooks React offrent une approche plus concise et fonctionnelle. Nous pouvons créer un hook réutilisable useErrorBoundary qui encapsule la logique de gestion des erreurs et offre un moyen pratique d'envelopper les composants susceptibles de lever des erreurs lors du chargement de ressources.

Créer un Hook personnalisé useErrorBoundary

Voici un exemple de hook useErrorBoundary :

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Explication :

• useState: Nous utilisons useState pour gérer l'état de l'erreur. Il définit initialement l'erreur à null.
• useCallback: Nous utilisons useCallback pour mémoïser les fonctions resetError et captureError. C'est une bonne pratique pour éviter les rendus inutiles si ces fonctions sont transmises comme props.
• Composant ErrorBoundary: C'est un composant fonctionnel créé avec useCallback qui prend children et une prop optionnelle fallback. Si une erreur existe dans l'état, il rend soit le composant fallback fourni, soit un message d'erreur par défaut. Sinon, il rend les enfants. Cela agit comme notre Error Boundary. Le tableau de dépendances `[error]` garantit qu'il se re-rend lorsque l'état `error` change.
• Fonction captureError: Cette fonction est utilisée pour définir l'état de l'erreur. Vous l'appellerez à l'intérieur d'un bloc try...catch lors du chargement des ressources.
• Fonction resetError: Cette fonction efface l'état de l'erreur, permettant au composant de rendre à nouveau ses enfants (et potentiellement de retenter le chargement des ressources).

Implémenter le Chargement de Ressources avec Gestion des Erreurs

Voyons maintenant comment utiliser ce hook pour gérer les erreurs de chargement de ressources. Prenons l'exemple d'un composant qui récupère les données d'un utilisateur depuis une API :

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry